<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
     #box{
     	width: 600px;
     	height: 350px;
     	border: 1px solid #ccc;
     	margin: 0 auto;
     	position: relative;
     	overflow: hidden;
     }
     ul,li{
     	margin: 0;
     	padding: 0;
     	list-style: none;

     }
     ul{
     	width: 1800px;
     	position: absolute; 
     	top: 0;
     	left: 0;
     }
     li{
     	float: left;
     }
     p{
     	width: 100%;
     	height: 35px;
     	background: #ccc;
     	opacity: 0.9;
        filter: Alpha(opacity=100);
        -ms:Alpha(Opacity=100);
        position: absolute;
        bottom: 10px;
        text-align: center;
     }
     p span{
     	padding: 4px 7px;
     	border-radius: 50%;
     	background: red;
     	line-height: 35px;
     	cursor: pointer;
     }
     .cur{
         background: gold;
         color: #fff;
     }
	</style>
	<script type="text/javascript">
		window.onload = function () {
			var Oul = document.getElementsByTagName("ul");
            var Oli = document.getElementsByTagName("li");
            var Ospan = document.getElementsByTagName("span");
            var num = 0;
            var time = null;
            time = setInterval(function(){
            	for (var j = 0 ; j< Ospan.length ; j++) {
            		Ospan[j].className = "";
            	};
            	if (num ==Oli.length-1) {
            		num =0;
            	}else{
            		num++;
            	}	 
            	Oul[0].style.left = (-num * 600) + "px";
            	Ospan[num].className = "cur";
            },1000);	
             for (var i = 0 ; i < Ospan.length; i++) {
             	Ospan[i].index = i ; 
             	Ospan[i].onmouseover = function () {
             		clearInterval(time);
             		for (var j =  0; j < Ospan.length; j++) {
            		   Ospan[j].className = "";

         		};
         		this.className = "cur";
                 Oul[0].style.left = (-this.index * 600) + "px";
             	}
                Ospan[i].onmouseout = function () {
                	time = setInterval(function(){
            	for (var j = 0 ; j< Ospan.length ; j++) {
            		Ospan[j].className = "";
            	};
            	if (num ==Oli.length-1) {
            		num =0;
            	}else{
            		num++;
            	}	 
            	Oul[0].style.left = (-num * 600) + "px";
            	Ospan[num].className = "cur";
            },1000);	
         } 

    }
}
 
 </script>
</head>
<body>
	<div id="box">
		<ul>
			<li><img src="images/11.jpg" width="600px" height="350px"></li>
			<li><img src="images/22.jpg" width="600px" height="350px"></li>
			<li><img src="images/33.jpg" width="600px" height="350px"></li>
		</ul>
		<p>
			<span class="cur">1</span>
			<span>2</span>
			<span>3</span>
		</p>
	</div>
</body>
</html>